@font-face {
	font-family: "FiraBold";
	font-style: normal;
	font-weight: 200;
	src: url("FiraMonoOT-Bold.otf");
}

@font-face {
	font-family: "FiraRegular";
	font-style: normal;
	font-weight: 200;
	src: url("FiraMonoOT-Regular.otf");
}

@font-face {
	font-family: "FiraLight";
	font-style: normal;
	font-weight: normal;
	src: url("FiraSansOT-Light.otf");
}

body{
	background-color: lightblue;
	text-align: center;
	margin: 0 auto;
}
		
a{
	color: white;
    text-decoration:none;
}
		  
a:hover{
    color: yellow;
    text-decoration: underline;
}
		  
em{
	color: #210B61;
}
			
strong{
	color: #FF0040;
}

h1, h2{
	text-align: center;
	color: blue;
	text-shadow: 2px 2px 3px rgba(7, 7, 7, 0.5);
}
			
img{
	box-shadow: 5px 5px 3px rgba(7,7,7,0.6);
	border-radius: 10px;
	height: auto;
	display: inline-block;
	width: 300px;
}

p, ol{
	color: #4d0099;
	font-size: 1.2em;
	text-align: left;
}
		  
ul{
   text-decoration: none;  
}
		    
ul li{
	background-color: #2E2EFE;
	color: #FFF;
	display: block;
	font-size: 1.3em;
	padding: 10px;
	cursor: pointer;
	margin: 5px;
	box-shadow: 5px 5px 3px rgba(7,7,7,0.6);
	border-radius: 10px;
	text-align: center;
	width: 200px;
}

		
footer{
	background-color: #848484;
	border-radius: 20px;
	box-shadow: 5px 5px 3px rgba(150,150,150,0.8);
	margin: 10px auto;
	padding: 10px;
	text-align: center;
	width: 93%;
}

/*******	Identificadores		******/

#contenedor{
	background-color: #A4A4A4;
	border-radius: 20px;
	box-shadow: 5px 5px 3px rgba(150,150,150,0.8);
	display: inline-block;
	vertical-align: top;
	text-align: center;
	width: 95%; 
}

#galeria, #videos, #svg, #responsive, #fuentes,	#degradados{
	display: block;
	margin: 0;
	padding: 10px 0; 
	width: 100%;
}
		
#degradados{
	background-color: maroon;
}

#fuentes{
	background-color: lightblue;
}
		
#responsive{
	background-color: darkblue;
}

#svg{
	background-color: powderblue;
}

#videos{
	background-color: blue;
}
		
/*******	Clases		******/

.azul-blanco, .rojo-blanco, .verde-blanco,	.azul-amarillo{
	-webkit-border-radius:10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	display: inline-block;
	height: 300px;
	margin: 10px;
	padding: 10px;
	vertical-align: top;
	width: 20%
}

.azul-amarillo{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#0000FF), to(#FFFF00));
	background-image: -moz-linear-gradient(top center, #0000FF, #FFFF00);
	background-image: -o-linear-gradient(top, #0000FF, #FFFF00);
	background-image: linear-gradient(top, #0000FF, #FFFF00);
}

.azul-blanco{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#0000FF), to(#FFF));
	background-image: -moz-linear-gradient(top center, #0000FF, #FFF);
	background-image: -o-linear-gradient(top, #0000FF, #FFF);
	background-image: linear-gradient(top, #0000FF, #FFF);
}

.centrado{
	text-align: center;
}

.enlace{
  	color:green;
}

.firamonobold{
	font-family: "FiraBold", Verdana, Helvetica, Arial;
}

.firamonoregular{
	font-family: "FiraRegular", Verdana, Helvetica, Arial;
}

.firasanslight{
	font-family: "FiraLight", Verdana, Helvetica, Arial;
}

.firasans{
	font-family: 'Fira Sans', cursive;	
}

.img-cabecera{
	height: 300px;
	width: 90%;
}

.img-galeria{
	margin:10px;
	height: auto;
	width: 300px;
	vertical-align: top;
}

.img-responsive{
	height: auto;
	width: 100%;
}

.princesasofia{
	font-family: 'Princess Sofia', cursive;
}

.resaltado-blanco{
	color: #FFF;
	font-size: 1.2em;
}

.rojo-blanco{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#FFF));
	background-image: -moz-linear-gradient(top center, #FF0000, #FFF);
	background-image: -o-linear-gradient(top, #FF0000, #FFF);
	background-image: linear-gradient(top, #FF0000, #FFF);
}

.titulo-blanco{
	color: #FFF;
}

.titulo-amarillo{
	color: #FFFF00;
}

.verde-blanco{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#00FF00), to(#FFF));
	background-image: -moz-linear-gradient(top center, #00FF00, #FFF);
	background-image: -o-linear-gradient(top, #00FF00, #FFF);
	background-image: linear-gradient(top, #00FF00, #FFF);
}

.vermas{
	color: #FFF;
	font-size: 1.3em;
}

@media (min-width: 1024px) {
	.videos {
		height: 315px;
		width: 560px;
	}	
}

@media (min-width:600px and min-width: 1023px) {
	.videos {
		height: 215px;
		width: 250px;
	}
	.img-cabecera{
		height: 200px;
	}	
}

@media (max-width: 599px) {
	.videos {
		height: 90px;
		width: 120px;
	}	
	.img-cabecera{
   		height: 80px;
   	}	
}